<template>
  <div class="picbook">
    <div class="picbookMode">
      <!-- 内容 -->
      <div style="position: absolute" ref="content">

        <swiper class="swiper" ref="assignmentSwiper" :options="swiperOption">
          <swiper-slide v-for="(item,index) in assignment[questionIndex]" :key="index" class="swiper-no-swiping">
            <component v-bind:is="assignmentMode[item.typeNumber]" :activeIndex="activeIndex" :index="index"
                       :questionIndex="questionIndex" :item="item" :isBreakLos="!isSeedEntery ? isBreakLos : ''"
                       @losShow="losShow" @nextAssignment="nextAssignment"></component>
          </swiper-slide>
        </swiper>

      </div>
      <div class="back" @touchend="backPicbookTouch"></div>
      <transition name="wordGeneralBounce">
        <Question v-if="questionShow" :assignment="assignment[questionIndex][activeIndex]" :activeIndex="activeIndex" />
      </transition>
      <BreakLos v-if="isBreakLos && !isSeedEntery" :isBreakLos="isBreakLos" :activeIndex="activeIndex"
                :assignment="assignment" :questionIndex="questionIndex" />
      <Breakthrough v-if="assignment[questionIndex][activeIndex].isFinish && !isSeedEntery" :activeIndex="activeIndex"
                    :assignment="assignment" :questionIndex="questionIndex" :isBreakStart="isBreakStart"
                    @breakStartTouch="breakStartTouch" @nextAssignment="nextAssignment" />
      <SucLottie />
      <FireworkLottie />
      <LoadPicbook ref="loadPicbook" />
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from "vuex"
  import DragSearch from "./typeNumber1/content.vue"
  import SelectSearch from "./typeNumber2/content.vue"
  import VoiceResponse from "./typeNumber3/content.vue"
  import Counting from "./typeNumber4/content.vue"
  import DeletionSearch from "./typeNumber5/content.vue"
  import BackgroundSearch from "./typeNumber6/content.vue"
  import BuildingBlock from "./typeNumber7/content.vue"
  import PicturePuzzle from "./typeNumber9/content.vue"
  import AlikeLark from "./typeNumber8/content.vue"
  import MemorySearch from "./typeNumber10/content.vue"
  import LookingWorm from "./typeNumber11/content.vue"
  import Similarity from "./typeNumber12/content.vue"
  import ColorMatching from "./typeNumber13/content.vue"
  import AnimalCoding from "./typeNumber14/content.vue"
  import Atlantis from "./typeNumber15/content.vue"
  import Conceptual from "./typeNumber16/content.vue"
  import Rover from './typeNumber17/content.vue'
  import Seeking from './typeNumber18/content.vue'
  import Orders from './typeNumber19/content.vue'
  import Riddles from './typeNumber20/content.vue'
  import Breakthrough from "./breakthrough.vue"
  import BreakLos from "./breakLos.vue"
  import Question from "./question.vue"
  import SucLottie from "./sucLottie.vue"
  import FireworkLottie from "./fireworkLottie.vue";
  import LoadPicbook from "../picbookList/loadPicbook.vue"
  export default {
    data() {
      return {
        moveX: 0,
        activeIndex: 0,
        isBreakLos: false,
        isBreakStart: true,
        questionShow: false,
        clearSlideChange: null,
        assignmentMode: {
          1: 'DragSearch',        // 文本拖动到图片
          2: 'SelectSearch',      // 图片选择
          3: 'VoiceResponse',     // 语音识别
          4: 'Counting',          // 图片数数
          5: 'DeletionSearch',    // 找出图片缺陷
          6: 'BackgroundSearch',  // 背景选择
          7: 'BuildingBlock',     // 拼图,
          8: 'AlikeLark',         //看图找到百灵鸟
          9: 'PicturePuzzle',     // 拼图
          10: 'MemorySearch',     //图片记忆
          11: 'LookingWorm',      //看图找刷子
          12: 'Similarity',       //图片概念 恶作剧的风
          13: 'ColorMatching',    //颜色匹配  找房子
          14: 'AnimalCoding',      //动物编码
          15: 'Atlantis',         //亚特兰蒂斯测验
          16: 'Conceptual',         //概念思维
          17: 'Rover',            //移动测试
          18: 'Seeking',          //积木数数
          19: 'Orders',           //词序测验
          20: 'Riddles'         //谜语
        },
        swiperOption: {
          loop: false,
          speed: 800,
          initialSlide: 0,
          runCallbacksOnInit: false,
          allowSwipeToNext: false,
          longSwipesRatio: 0.15,
          on: {
            //翻页
            slideChangeTransitionStart: () => {
              clearTimeout(this.clearSlideChange)
              this.activeIndex = this.$refs.assignmentSwiper.swiper.activeIndex
              this.questionShow = false
              setTimeout(() => { this.questionShow = true }, 400)
            },
            touchStart: event => {
              this.moveX = event.changedTouches[0].clientX
            },
            touchEnd: event => {
              const endX = event.changedTouches[0].clientX - this.moveX
              if (this.$refs.assignmentSwiper.swiper.isEnd && endX <= -100) {
                this.setPopup({
                  content: "这是最后一页了哦"
                })
              }
              if (this.$refs.assignmentSwiper.swiper.isBeginning && endX >= 100) {
                this.setPopup({
                  content: "已经是第一页了哦"
                })
              }
            }
          }
        }
      }
    },
    components: {
      Question,
      Breakthrough,
      BreakLos,
      DragSearch,
      SelectSearch,
      VoiceResponse,
      Counting,
      DeletionSearch,
      BackgroundSearch,
      BuildingBlock,
      PicturePuzzle,
      AlikeLark,
      MemorySearch,
      LookingWorm,
      Similarity,
      ColorMatching,
      AnimalCoding,
      Atlantis,
      Conceptual,
      Rover,
      Seeking,
      Orders,
      Riddles,
      SucLottie,
      FireworkLottie,
      LoadPicbook
    },
    created() {
      setTimeout(() => { this.questionShow = true }, 600)
    },
    computed: {
      ...mapGetters("assignmentStatus", {
        assignment: "getAssignment"
      }),
      ...mapGetters("contentStatus", {
        questionIndex: "getQuestionIndex"
      }),
      ...mapGetters("picbookListStatus", {
        picbookList: "getPicbookList"
      }),
      ...mapGetters("seedActivityStatus", {
        seedActivity: "getSeedActivity",
        seedPicbook: "getSeedPicbook",
        isSeedEntery: "getIsSeedEntery"
      })
    },
    methods: {
      backPicbookTouch: function () {
        this.setPopup({
          content: "确定返回阅读吗?",
          callback: () => {
            this.touchMusic()
            this.setLoading({
              callback: () => {
                this.$router.replace({ path: "/picbook", query: { index: this.$route.query.index, beforeRouter: this.$route.query.beforeRouter } })
              }
            })
          }
        })
      },
      nextAssignment: function () {
        if (this.$refs.assignmentSwiper.swiper.isEnd) {
          this.setIsSeedEntery(true)
          if (this.seedPicbook.length === this.seedActivity.picbookIds.length ) {
            setTimeout(() => {
              this.setPopup({
                content: "你已完成所有的题型" +
                        "点击确定查看结果",
                callback: () => {
                  this.setLoading({
                    callback: () => {
                      this.setIsResulteShow(true)
                      this.loadMastery()
                      this.$router.push({ path: "/study" })
                    }
                  })
                }
              })
            }, 1500)
          } else {
            //随机推荐一本绘本  种子用户
            this.setPopup({
              content: "恭喜您完成上半部分的内容了，请继续努力开始下半部分的内容吧!",
              callback: () => {
                this.touchMusic()
                const picbookRemain = this.seedActivity.picbookIds.filter(item => { return this.seedPicbook.indexOf(item) < 0 })
                const picbookId = parseInt(Math.random() * picbookRemain.length)
                const seedPicbook = this.picbookList.filter(item => { return item.id === picbookRemain[picbookId] })
                this.parseTextAudio({ play: false })
                this.$refs.loadPicbook.loadPicbook({
                  picbookId: seedPicbook[0].id
                })
                this.setSeedPicbook(seedPicbook[0].id)
                this.loadMastery()
              }
            })
          }
        }
        this.clearSlideChange = setTimeout(() => {
          this.$refs.assignmentSwiper.swiper.slideNext()
        }, 0)
      },
      losShow: function () {
        setTimeout(() => {
          this.isBreakLos = true
        }, 0)
      },
      breakStartTouch: function () {
        setTimeout(() => { this.isBreakStart = false }, 0)
      },
      //用户评测结果  查看之前渲染数据
      loadMastery: async function () {
        const json = {
          deviceUuid: this.deviceUuid,
          isInSeedActivity: this.isSeedEntery                  // 如果为 false，表示是普通模式
          // 如果为 true，表示是通过【活动 - 种子用户孵化】进入的
        }
        const [data, err] = await this.awaitWarp(this.$post(this.api.loadMastery, json))
        if (data) {
          this.setUserMastery(data.mastery)
          this.studyExplain(data.abilityAndExplainationMap)
        }
      },
      ...mapActions("mainStatus", ["setPopup", "setLoading"]),
      ...mapActions("personalStatus", ["setUserMastery", "studyExplain"]),
      ...mapActions("seedActivityStatus", ["setSeedPicbook", "setIsResulteShow", "setIsSeedEntery"])
    }
  }
</script>

<style scoped lang='stylus'>
  @import '../../common/stylus/picbook.styl'
  .picbookMode
    position absolute
    width 100%
    height 100%
    z-index 98
</style>
